<template>
  <div class="container">
    <el-steps :active="activeStep" finish-status="success" class="steps">
      <el-step title="步骤 1" />
      <el-step title="步骤 2" />
      <el-step title="步骤 3" />
    </el-steps>

    <div class="step-content">
      <div v-if="activeStep === 0">
        <el-input v-model="email" placeholder="请输入您的邮箱号码" clearable />
        <el-button type="primary" @click="nextStep" style="margin-top: 10px;">发送验证码</el-button>
      </div>
      <div v-if="activeStep === 1">
        <el-input v-model="code" placeholder="请输入您的短信验证码" clearable />
        <el-button type="primary" @click="nextStep2" style="margin-top: 10px;">确定</el-button>
      </div>
      <div v-if="activeStep === 2">
        <el-input v-model="password" placeholder="请输入新的密码" show-password clearable />
        <el-button type="success" @click="submitForm" style="margin-top: 10px;">提交</el-button>
      </div>
    </div>

    <el-button type="info" class="back-button" @click="prevStep">返回</el-button>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import { post } from '@/utils/axios';

const activeStep = ref(0);
const email = ref('');
const code = ref('');
const password = ref('');

function nextStep() {
  if (activeStep.value < 2) {
    activeStep.value++;
  }
  post('/sc/employee/sendEmailCode', { email: email.value }, (data) => {
    if (data.state === "success") {
      ElMessage.success('发送成功！');
    } else {
      ElMessage.error('未查询到数据，请重新查询');
    }
  });
}

function nextStep2() {
  post('/sc/employee/loginByEmail', { email: email.value, code: code.value }, (data) => {
    if (data.state === "success") {
      ElMessage.success('验证成功！');
      if (activeStep.value < 2) {
        activeStep.value++;
      }
    } else {
      console.log(data);
      ElMessage.error('未查询到数据，请重新查询！！');
    }
  });
}

function prevStep() {
  if (activeStep.value > 0) {
    activeStep.value--;
  } else {
    window.location.href = 'http://localhost:5173/?#/login';
  }
}

function submitForm() {
  ElMessage.info('表单提交!');
  post('/sc/employee/updatePassword', { email: email.value, newPassword: password.value }, (data) => {
    if (data.state === "success" || data.status === 1) {
      ElMessage.success('修改成功！');
      setTimeout(() => {
        window.location.href = 'http://localhost:5173/?#/login';
      }, 800);
    } else {
      ElMessage.error('修改失败');
    }
  });
}
</script>
<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 760px;
  min-height: 300px;
  margin: 0 auto;
  background-color: rgba(74, 161, 168, 0.91);
  padding: 20px;
  box-sizing: border-box;
}

.steps {
  width: 60%;
  margin-bottom: 50px;
}

.step-content {
  width: 100%;
  max-width: 600px;
  text-align: center;
}

.back-button {
  margin-top: 20px;
}
</style>
